<template>
  <div class="user">
    <div class="top">
      <input type="file" ref="file" style="display: none" @change="selEnd" />
      <img v-if="myFile" :src="myFile | dalImg" alt="" @click="selFile" />
      <img
        class="userImg"
        v-else
        src="https://img1.baidu.com/it/u=1898474729,1612489909&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
        alt=""
        @click="selFile"
      />
      <p>{{ user.nickName ? user.nickName : user.userName }}</p>
      <p>积分:{{ user.score }}</p>
    </div>
    <van-button
      type="primary"
      icon="medal"
      style="width: 35vw; display: block; margin: 10px auto"
      >签到</van-button
    >
    <van-cell title="我的积分" is-link />
    <van-cell title="我的订单" is-link />
    <van-cell title="个人信息" is-link />
    <van-cell title="修改密码" is-link />
    <p>sdasd</p>

    <van-button
      @click="logOut"
      type="danger"
      style="width: 70vw; margin: 10px auto; display: block"
      >退出</van-button
    >
  </div>
</template>

<script>
import { userAPI } from "../services/auth";
import { removeToken } from "../utils/auth";
import { userImgAPI } from "../services/auth";
export default {
  name: "User",
  data() {
    return {
      user: {},
      myFile: "",
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    selFile() {
      console.log(this.$refs);
      this.$refs.file.click();
    },
    async selEnd() {
      // console.log(this.$refs.file.files[0]);
      const formData = new FormData();
      formData.append("file", this.$refs.file.files[0]);
      const r = await userImgAPI(formData);
      console.log(r);
      this.myFile = r.data;
      // console.log(this.myFile);
      // userImgAPI(formData).then((r) => console.log(r));
    },
    logOut() {
      removeToken();
      this.$router.push("/");
    },
    async loadData() {
      const res = await userAPI();
      console.log(res);
      this.user = res.data;
    },
  },
};
</script>

<style scoped>
.top {
  background-color: #d35627cf;
  display: flex;
  flex-direction: column;
  align-items: center;
}
p {
  color: #fff;
  line-height: 30px;
}
.userImg {
  width: 40vw;
  border-radius: 50%;
}
</style>
